<template>
  <div class="layout-page bg-#f8f9fe pt-32px">
    <div class="layout-page-inner box-border bg-#fff w-1328px py-70px">
      <h3 class="font-size-24px fw-500 text-center mb-57px">
        {{ isAdd ? "新增" : "编辑" }}需求信息
      </h3>
      <el-form
        class="apply-form w-60% mx-auto"
        ref="applyForm"
        :model="formData"
        :rules="rules"
        label-position="right"
        :label-width="130"
      >
        <el-form-item label="供应类型" prop="supplyType">
          <el-select
            v-model="formData.supplyType"
            placeholder="请选择供应类型"
            @change="handleTypeChange"
          >
            <el-option
              v-for="option in SOURCE_TYPE_OPTIONS"
              :key="option.value"
              :value="option.value"
              :label="option.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供应标题" prop="supplyTitle">
          <el-input
            v-model="formData.supplyTitle"
            placeholder="请输入供应标题"
          />
        </el-form-item>
        <el-form-item label="供应描述" prop="supplyDesc">
          <el-input
            v-model="formData.supplyDesc"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="省市" prop="provinceArr">
          <ProvinceSelect
            v-model="formData.provinceArr"
            placeholder="请选择城市省市"
          />
        </el-form-item>
        <!-- 机柜 -->
        <template v-if="formData.supplyType === 1">
          <el-form-item label="供电方式" prop="framePowerWay">
            <el-select
              v-model="formData.framePowerWay"
              placeholder="请选择供电方式"
            >
              <el-option
                v-for="option in powerWayOptions"
                :key="option.value"
                :value="option.value"
                :label="option.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="机柜功率(KW)" prop="framePower">
            <el-input
              v-model="formData.framePower"
              placeholder="请输入机柜功率(KW)"
            />
          </el-form-item>
          <el-form-item label="机柜高度" prop="frameHeight">
            <el-input
              v-model="formData.frameHeight"
              placeholder="请输入机柜高度"
            />
          </el-form-item>
          <el-form-item label="单价" prop="framePrice">
            <el-input
              v-model.number="formData.framePrice"
              placeholder="请输入单价"
            />
          </el-form-item>
          <el-form-item label="拥有数量" prop="supplyNum">
            <el-input
              v-model.number="formData.supplyNum"
              placeholder="请输入拥有数量"
            />
          </el-form-item>
        </template>
        <!-- 带宽 -->
        <template v-if="formData.supplyType === 2">
          <el-form-item label="运营商" prop="bwOperator">
            <el-select v-model="formData.bwOperator" placeholder="请选择运营商">
              <el-option
                v-for="option in operatorOptions"
                :key="option.value"
                :value="option.value"
                :label="option.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="路由类型" prop="bwRouteType">
            <el-select
              v-model="formData.bwRouteType"
              placeholder="请选择路由类型"
            >
              <el-option
                v-for="option in routeTypeOptions"
                :key="option.value"
                :value="option.value"
                :label="option.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="带宽价格" prop="bwBandwidthPrice">
            <el-input
              v-model.number="formData.bwBandwidthPrice"
              placeholder="请输入带宽价格"
            />
          </el-form-item>
          <el-form-item label="带宽数量" prop="bwBandwidthNum">
            <el-input
              v-model.number="formData.bwBandwidthNum"
              placeholder="请输入带宽数量"
            />
          </el-form-item>
          <el-form-item label="IP价格" prop="bwIpPrice">
            <el-input
              v-model.number="formData.bwIpPrice"
              placeholder="请输入IP价格"
            />
          </el-form-item>
          <el-form-item label="拥有数量" prop="bwIpNum">
            <el-input
              v-model.number="formData.bwIpNum"
              placeholder="请输入拥有数量"
            />
          </el-form-item>
        </template>
        <!-- 算力 -->
        <template v-if="formData.supplyType === 4">
          <el-form-item label="租出算力能力" prop="gpuApplyPflops">
            <el-input
              v-model="formData.gpuApplyPflops"
              placeholder="请输入租出算力能力(PFLOPS)"
            />
          </el-form-item>
          <el-form-item label="计算资源" prop="gpuResource">
            <el-select
              v-model="formData.gpuResource"
              placeholder="请选择计算资源"
              clearable
            >
              <el-option
                v-for="option in gpuSourceOptions"
                :key="option.value"
                :value="option.value"
                :label="option.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="网络架构" prop="gpuNet">
            <el-input v-model="formData.gpuNet" placeholder="请输入网络架构" />
          </el-form-item>
          <el-form-item label="计费模式" prop="gpuAbilityType">
            <el-select
              v-model="formData.gpuAbilityType"
              placeholder="请选择计费模式"
              clearable
            >
              <el-option label="算力包月" :value="1" />
              <el-option label="卡时计费" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="拥有数量" prop="gpuNum">
            <el-input
              v-model.number="formData.gpuNum"
              placeholder="请输入拥有数量"
            />
          </el-form-item>
          <el-form-item label="单价" prop="gpuPrice">
            <el-input
              v-model.number="formData.gpuPrice"
              placeholder="请输入单价"
            />
          </el-form-item>
          <el-form-item label="卡类型" prop="gpuType">
            <el-select
              v-model="formData.gpuType"
              placeholder="请选择卡类型"
              clearable
            >
              <el-option
                v-for="option in gpuTypeOptions"
                :key="option.value"
                :value="option.value"
                :label="option.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="适用场景" prop="gpuOccasion">
            <el-input
              v-model="formData.gpuOccasion"
              placeholder="请输入适用场景"
            />
          </el-form-item>
        </template>
        <el-form-item label="申请开始时间" prop="supplyTime">
          <el-date-picker
            clearable
            v-model="formData.supplyTime"
            type="daterange"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="供应有效时间" prop="deadTime">
          <el-date-picker
            clearable
            v-model="formData.deadTime"
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择供应有效时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="formData.remark"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="mt-36px h-48px w-108px b-rd-0"
            :loading="confirmLoading"
            @click="handleSubmit"
            >确认提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
const supplyTypeFieldsMap = {
  1: ["framePowerWay", "framePower", "frameHeight", "framePrice", "supplyNum"],
  2: [
    "bwOperator",
    "bwRouteType",
    "bwBandwidthPrice",
    "bwBandwidthNum",
    "bwIpPrice",
    "bwIpNum",
  ],
  4: [
    "gpuApplyPflops",
    "gpuResource",
    "gpuNet",
    "gpuAbilityType",
    "gpuNum",
    "gpuPrice",
    "gpuType",
    "gpuOccasion",
  ],
};

import { useLoading, useDict } from "@/hooks";
import { SOURCE_TYPE_OPTIONS, DICT_MAP } from "@/const";

const route = useRoute();
const isAdd = computed(() => !route.query.id);
const router = useRouter();
const $api = inject("$api");
const applyForm = ref();
const { loading: confirmLoading, setLoading } = useLoading();

const { list: cityOptions } = useDict(DICT_MAP.city_names);
const { list: powerWayOptions } = useDict(DICT_MAP.power_way);
const { list: operatorOptions } = useDict(DICT_MAP.operator);
const { list: routeTypeOptions } = useDict(DICT_MAP.route_type);
const { list: gpuSourceOptions } = useDict(DICT_MAP.gpu_resource_type);
const { list: gpuTypeOptions } = useDict(DICT_MAP.supply_gpu_type);

const formData = ref({});
const rules = reactive({
  supplyType: [{ required: true, message: "请选择供应类型" }],
  supplyTitle: [{ required: true, message: "请输入供应标题" }],
  supplyDesc: [{ required: true, message: "请输入供应描述" }],
  provinceArr: [{ required: true, type: "array", message: "请选择省市" }],
  framePowerWay: [{ required: true, message: "请选择供电方式" }],
  framePower: [{ required: true, message: "请输入机柜功率" }],
  frameHeight: [{ required: true, message: "请输入机柜高度" }],
  framePrice: [{ required: true, type: "number", message: "请输入单价" }],
  supplyNum: [{ required: true, type: "number", message: "请输入数量" }],
  bwOperator: [{ required: true, message: "请选择运营商" }],
  bwRouteType: [{ required: true, message: "请选择路由类型" }],
  bwBandwidthPrice: [
    { required: true, type: "number", message: "请输入带宽价格" },
  ],
  bwBandwidthNum: [
    { required: true, type: "number", message: "请输入带宽数量" },
  ],
  bwIpPrice: [{ required: true, type: "number", message: "请输入IP价格" }],
  bwIpNum: [{ required: true, type: "number", message: "请输入拥有数量" }],
  gpuApplyPflops: [{ required: true, message: "请输入租出算力能力" }],
  gpuResource: [{ required: true, message: "请选择计算资源" }],
  gpuNet: [{ required: true, message: "请输入网络架构" }],
  gpuAbilityType: [{ required: true, message: "请选择计费模式" }],
  gpuNum: [{ required: true, type: "number", message: "请输入拥有数量" }],
  gpuPrice: [{ required: true, type: "number", message: "请输入卡价格" }],
  gpuType: [{ required: true, message: "请选择卡类型" }],
  gpuOccasion: [{ required: true, message: "请输入适用场景" }],
  supplyTime: [{ required: true, type: "array", message: "请选择申请时间" }],
  deadTime: [{ required: true, message: "请选择供应有效时间" }],
});

const handleTypeChange = (val) => {
  const fields = supplyTypeFieldsMap[val];
  fields.forEach((i) => {
    formData.value[i] = null;
  });
  applyForm.value.clearValidate(fields);
};

const handleSubmit = async () => {
  applyForm.value.validate(async (valid) => {
    if (!valid) return;
    setLoading(true);
    try {
      const submitData = toValue(formData);
      // 处理时间
      submitData.supplyBegin = submitData.supplyTime[0];
      submitData.supplyEnd = submitData.supplyTime[1];
      delete submitData.supplyTime;
      // 处理省市
      [submitData.provinceName, submitData.cityName] = submitData.provinceArr;
      delete submitData.provinceArr;
      const apiName = isAdd.value ? "createSupply" : "updateSupply";
      await $api.supply[apiName](submitData);
      ElMessage.success(isAdd.value ? "创建成功" : "编辑成功");
      setTimeout(() => {
        router.push("/userCenter?active=supply");
      }, 500);
    } catch (e) {
      setLoading(false);
    }
  });
};
const getDetail = async (id) => {
  const { data } = await $api.supply.getSupplyDetail(id);
  data.supplyTime = [data.supplyBegin, data.supplyEnd];
  data.provinceArr = [data.provinceName, data.cityName];
  formData.value = data;
};

onMounted(() => {
  if (route.query.id) getDetail(route.query.id);
});
</script>
